import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd'
import './index.scss'

import { inject, observer } from 'mobx-react'

const layout = {
  labelCol: {
    span: 3,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 3,
    span: 16,
  },
}
@inject('store')
@observer
class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      password: ''
    }
  }
  componentWillMount(){
    
  
  }

  render() {
  
    return (
      <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={this.onFinish}
        onFinishFailed={this.onFinishFailed}
        className="login"
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: '请输入用户名!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item {...tailLayout} name="remember" valuePropName="checked">
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            登陆
        </Button>
        </Form.Item>
      </Form>

    )
  }
  onFinish = (values) => {
    console.log('Success1:', values);
    this.props.store.user.userCommit('login', {
      name: values.username
    })
    this.props.history.push('/')

  }
  onFinishFailed = (values) => {
    console.log('Failed:', values);
  }
}
export default Login